<template>
  <div class="con">
      <div class="every" v-for="item in list" :key="item.id" v-show="cur==item.status||cur==0">
          <div class="state active1" v-if="item.status==3 ">进行中</div>
          <div class="state active3" v-if="item.status==2 ">强制终止</div>
          <div class="state active2" v-if="item.status==1 ">已完成</div>
          <div class="right">
              <div class="name">{{item.title}}</div>
              <div class="bottom">
                    <div class="flow1">
                        <p class="star" >评分：
                            <span v-for="it in 5" :key="it" :class="it<=item.star?'show2':''"></span>
                        </p>
                        <p class="master">执行人:<span v-for=" ite in item.master"  :key="ite">{{ite}}</span></p>
                    </div>
                    <div class="time1">
                        <p class="startTime">开始时间：{{item.startTime}}</p>
                        <p class="endTime">结束时间：{{time(item.startTime,item.endTime)}}</p>
                    </div>
              </div>
          </div>
          <div class="task show3" v-if="item.taskType==0">日常任务</div>
          <div class="task show1" v-if="item.taskType==1">专项任务</div>
          <div class="task show2" v-if="item.taskType==2">临时任务</div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
           
        }
    },
    props:["list","cur"],
    methods:{
      time(dateStr,dayCount){
        let resultDateStr=""
        let tempDate=''
        let resultDate=""
       tempDate=new Date(dateStr.replace(/-/g,"/"));//把日期字符串转换成日期格式
       resultDate=new Date((tempDate/1000+(86400*dayCount))*1000);//增加n天后的日期
       resultDateStr=resultDate.getFullYear()+"-"+(resultDate.getMonth()+1)+"-"+(resultDate.getDate());//将日期转化为字符串格式
       return resultDateStr;
      }
  }
}
</script>

<style lang="less" scoped>
.show1{
    background: rgb(211, 8, 194) !important;
}
.show2{
    background: rgb(224, 60, 10) !important;
}
.show3{
    background: rgb(8, 211, 35) !important;
}
.con{
    width: 100%;
    margin: 10px;
    letter-spacing:2px
}
.every{
    width: 100%;
    height: 130px;
    display: flex;
    color: #fff;
    margin: 15px 0px;
    .state{
        width: 130px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;  
    }
    .right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        font-size: 16x;
        .name{
            color: #fff;
            background: rgb(20, 20, 20);
            height: 50px;
            line-height: 50px;
            padding-left: 10px;
            font-size: 18px;
        }
        .bottom{
            height: 80px;
            background: rgb(28, 98, 228);
            line-height: 25px;
            padding-left: 20px;
            display: flex;
            flex-direction: column;
            >div{
                flex: 1;
            }
        }
    }
}
.flow1{
    display: flex;
    line-height: 40px;
}
.time1{
    display: flex;
    line-height: 40px;
    
}
.endTime{
        margin-left: 100px;
    }
.star{
    width: 300px;
    span{
        transform: translateY(2px);
        display:inline-block ;
        width: 20px;
        height: 20px;
        background: none;
        border-radius: 50%;
        line-height: 40px;
        border: 1px solid #fff;
        margin: 0 3px;
    }
}
.task{
    writing-mode: tb-rl;
    width: 50px;
    height: 100%;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    letter-spacing:2px
}
.master{
    span{
        margin: 0 5px;
    }
}
.active1{
   background: chartreuse !important;
}
.active2{
    background: orangered !important;
}
.active3{
    background: rgb(138, 136, 136) !important;
}
</style>